// src/components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from '../../store';
import { Button,Space } from 'antd';
function Counter() {
  // 1. 获取状态（从 store 中取 counter 切片的 value）
  const count = useSelector((state) => state.counter.value);
  
  // 2. 获取 dispatch 方法
  const dispatch = useDispatch();

  return (
    <div>
      <h2>当前计数: {count}</h2>
      <div>
        {/* 3. 发送 Action */}
        <Space>
        <Button onClick={() => dispatch(decrement())} >-</Button>
        <Button onClick={() => dispatch(increment())}>+</Button>
        <Button onClick={() => dispatch(incrementByAmount(5))}>+5</Button>
        </Space>
      </div>
    </div>
  );
}

export default Counter;